<template>
  <div class="baseBox">
    <Card>
      <Form v-model:form="form" :formList="formList" layout="inline" />
    </Card>
    <Table class="mt_20 flex" :width="2300" :dataSource="dataSource" :columns="columns">
      <template #header>
        <div class="d_f w_100b">
          <a-space>
            <a-button type="primary">批量导入 </a-button>
            <a-button type="primary">导出 </a-button>
            <a-button type="primary" @click="$download()">模板下载</a-button>
          </a-space>
          <div class="flex" style="display: flex; justify-content: flex-end">
            <a-button type="primary" @click="add">新增 </a-button>
          </div>
        </div>
      </template>
      <template #b="{ value }">
        <span style="color: #ff7940">{{ value }}</span>
      </template>
      <template #g="{ value }">
        <span v-if="value == 1" style="color: #2bcdc4">已收录</span>
        <span v-if="value == 0" style="color: #ff544c">未收录</span>
      </template>
      <template #o="{ value }">
        <span v-if="value == 1" style="color: #2bcdc4">已收录</span>
        <span v-if="value == 0" style="color: #ff544c">未收录</span>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { formList, dataSource, columns } from "./href";
import Card from "@/components/Card";
import Form from "@/components/Form";
import Table from "@/components/Table";
const form = ref({});
const editVisible = ref<boolean>(false);
function add() {
  editVisible.value = true;
}
</script>

<style lang="less" scoped></style>
